<template>
  <div>
    <div class="weGame-title">新内容发布</div>
    <div ref="gameList" class="weGame-list">
      <div class="weGame-list-wraps" :key="index" v-for="(item,index) in  list">
        <div class="weGame-list-time">
          <div v-if="preamble(list,index)">
            {{item.ads_info.__time}}
          </div>
        </div>
        <img :src="item.ads_info.__info.hot_image" alt="">
        <div class="weGame-list-desc">
          <div>{{item.ads_info.game_name}}</div>
          <div>{{item.ads_info.ad_description}}</div>
          <div>
            {{Type(item.ads_info.ad_type )}}
          </div>
        </div>
      </div>
    </div>
    <div class="weGame-drag">
      <left-outlined class="weGame-drag-icon" />
      <div class="weGame-drag-wraps">
        <a-slider :step="0.01" :max="1" :min="0" v-model:value="silder" :tooltip-visible="false" />
      </div>
      <right-outlined class="weGame-drag-icon" />
    </div>
  </div>

</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  getCurrentInstance,
  watch,
} from "vue";
import { getGameList } from "@/server/api";
import { LeftOutlined, RightOutlined } from "@ant-design/icons-vue"; //icon
import moment from "moment";
import { Type } from "@/units/type";
export default defineComponent({
  components: {
    LeftOutlined,
    RightOutlined,
  },
  setup() {
    const ctx = getCurrentInstance();
    console.log();
    let list = reactive([]);
    let silder = ref(0);
    const gameList = async () => {
      const { data } = await getGameList();
      const $list = data?.child_list ?? [];
      $list.forEach((v) => {
        v.ads_info.__info = JSON.parse(v.ads_info.other_info);
        v.ads_info.__time = moment(v.ads_info.__info.event_time * 1000).format(
          "MM.DD"
        );
      });
      $list.sort(
        (a, b) => a.ads_info.__info.event_time - b.ads_info.__info.event_time
      );
      list.push(...$list);
    };
    //前序算法
    const preamble = (item, index) => {
      if (index != 0) {
        let oldVal = item[index - 1].ads_info.__time;
        let newVal = item[index].ads_info.__time;
        return !(oldVal === newVal);
      } else {
        return true;
      }
    };
    watch(silder, (newval) => {
      const silderDom = ctx.refs.gameList;
      const X = silderDom.scrollWidth;
      silderDom.scrollLeft = X * newval;
    });
    onMounted(async () => {
      await gameList();
    });
    return {
      list,
      moment,
      silder,
      preamble,
      Type,
    };
  },
});
</script>       
<style socped lang="less">
.weGame-drag {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  align-items: center;
  &-icon {
    font-size: 30px;
    color: #ccc;
  }
  &-wraps {
    width: 500px;
  }
}
.weGame-list {
  width: 100%;
  display: flex;
  height: 100%;
  overflow: hidden;
  &-wraps {
    width: 25%;
    flex: none;
    padding-left: 20px;
    height: 100%;
    img {
      width: 100%;
      object-fit: cover;
      height: 300px;
      border-radius: 6px 6px 0 0;
    }
  }
  &-time {
    font-weight: 700;
    font-size: 24px;
    position: relative;
    height: 34px;
    div {
      background-color: #ecebee;
    }
    &::after {
      content: " ";
      height: 10px;
      background: url(https://wegame.gtimg.com/g.55555-r.c4663/rail/images/future-head-bg.cba1507a.png)
        repeat-x 0 0;
      opacity: 0.1;
      width: 100%;
      position: absolute;
      top: 40%;
      left: 64px;
    }
  }
  &-desc {
    background: #fff;
    border-radius: 0 0 6px 6px;
    padding-top: 10px;
    div {
      padding-left: 10px;
    }
    & > div:first-child {
      color: #757575;
    }
    & > div:nth-child(2) {
      color: #3c3c3c;
      font-size: 20px;
      font-weight: 700;
      margin-top: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding-bottom: 5px;
    }
    & > div:last-child {
      color: #ff6f00;
      padding-bottom: 5px;
    }
  }
  & > div:first-child {
    padding-left: 0;
  }
}
</style>